<template>
  <div class="content">
    <div class="show">
      <van-cell
        is-link
        title="个人信息"
        @click="[userflag ? (show = true) : goLogin()]"
      />
      <van-action-sheet v-model:show="show" title="个人信息">
        <div class="show-content">
          <div class="show-img">
            <img
              src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/user.png?v=202106101527"
              alt=""
            />
            <span @click="set">保存</span>
          </div>
          <div class="name">
            <span>昵称</span><input type="text" v-model="username" />
          </div>
          <div class="name">
            <span>性别</span
            ><label v-for="(item, index) in radioData" :key="index">
              <input
                type="radio"
                v-model="radioVal"
                :value="item.value"
                @change="getRadioVal"
              />
              {{ item.value }}
            </label>
          </div>
        </div>
      </van-action-sheet>
    </div>
    <div class="showo">
      <van-cell
        is-link
        title="账户与安全"
        @click="[userflag ? (showo = true) : goLogin()]"
      />
      <van-action-sheet v-model:show="showo" title="账户与安全">
        <div class="show-content">
          <van-cell is-link title="淘宝授权" />
          <van-cell is-link title="支付宝授权" />
          <van-cell is-link title="修改密码" />
        </div>
      </van-action-sheet>
    </div>
    <div class="showt">
      <van-cell is-link title="意见反馈" @click="showt = true" />
      <van-action-sheet v-model:show="showt" title="意见反馈">
        <div class="show-content">
          反馈内容<van-field
            v-model="message"
            rows="3"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入您要反馈的内容（最多100字）"
            show-word-limit
          />
          <van-uploader
            v-model="fileList"
            multiple
            :after-read="afterRead"
            :max-count="5"
          />
          <span class="t-span">最多上传5张</span>
          联系方式
          <van-field
            v-model="tel"
            type="tel"
            size="100"
            placeholder="请填写你的联系QQ或邮箱"
          />
          <button
            :class="[mesflag ? '' : 'st-btn']"
            :disabled="!mesflag"
            @click="stbtn"
          >
            提交
          </button>
          <van-overlay :show="showflag" @click="show = false">
            <div class="wrapper" @click.stop>
              <div class="block">成功</div>
            </div>
          </van-overlay>
        </div>
      </van-action-sheet>
    </div>
    <div v-if="userflag" class="btn" @click="btn">退出登录</div>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs, ref, watch } from "vue";
import { getCookie, setCookie, removeCookie } from "@/utils";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const state = reactive({
      show: false,
      showt: false,
      showo: false,
      username: "",
      radioData: [{ value: "男" }, { value: "女" }],
      radioVal: "男",
      userflag: false,
      tel: "",
      message: "",
      mesflag: false,
      showflag: false,
    });
    onMounted(() => {
      state.username = getCookie("username");
      state.radioVal = getCookie("sex") ? getCookie("sex") : "男";
      if (getCookie("userId")) {
        state.userflag = true;
      } else {
        state.userflag = false;
      }
    });
    watch([state], () => {
      if (state.message != "") {
        state.mesflag = true;
      } else {
        state.mesflag = false;
      }
    });
    const fileList = ref([]);
    return {
      ...toRefs(state),
      set() {
        setCookie("username", state.username, 7);
        setCookie("sex", state.radioVal);
        state.show = false;
      },
      btn() {
        router.push({
          name: "login",
        });
        removeCookie("username");
        removeCookie("userId");
        removeCookie("token");
        removeCookie("sex");
      },
      stbtn() {
        state.showflag = true;
        setTimeout(() => {
          history.go(0);
        }, 1000);
      },
      goLogin() {
        router.push({
          name: "login",
        });
      },
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      },
      fileList,
    };
  },
});
</script>
<style lang="stylus" scoped>
.content
  height 100%
  padding-top .1rem
  background-color rgb(245,245,245)
  box-sizing border-box
.showt
  margin-top .1rem
  .show-content
    font-size .15rem
    background-color #fff
    padding 0 .16rem
    .t-span
      display block
      font-size .12rem
      color #c5c8ce
    /deep/.van-field__control
      background-color rgb(245,245,245)
      height .3rem
    /deep/.van-cell
      padding .1rem 0
    button
      height: 0.4rem;
      line-height: 0.4rem;
      background: #ff2448;
      border-radius: 0.4rem;
      border: none;
      box-shadow: none;
      font-size: 0.16rem;
      font-weight: 400;
      margin-top: 0.3rem;
      width: 100%;
      color #fff
    .st-btn
      background: rgb(221, 221, 221);
      color: rgb(153, 153, 153);
    .wrapper
      width .5rem
      height .5rem
.show-content
  background-color rgb(245,245,245)
.show-img
  height: 160px;
  background: #fff;
  display flex
  justify-content center
  align-items center
  position relative
  span
    position absolute
    top 0
    right 0
    font-size  .15rem
    padding .1rem
    display block
  img
    width .8rem
    height .8rem
.name
  font-size .15rem
  padding .14rem .12rem
  background-color #fff
  margin-top .1rem
  display flex
  align-items center
  span
    width .6rem
  input
   border 0
   outline none
.btn
  color #fe3a33
  font-size .16rem
  padding .14rem .12rem
  background-color #fff
  margin-top .1rem
  text-align center
</style>
